<!--
 * @Description: 锚点菜单组件C端组件布局
-->
<template>
  <div
    v-if="pageData.tabs.length > 1 || !isClient"
    class="anchor-point-module"
    :style="bgColor"
  >
    <van-tabs ref="tabs" :ellipsis="false" swipeable @click="change">
      <van-tab
        v-for="(item, index) in pageData.tabs"
        :key="index"
        :ref="'tab' + index"
        v-model="active"
        :style="tabStyle"
      >
        <template slot="title">
          <div
            class="tab-title"
            :style="index === active ? activeTabStyle : tabStyle"
          >
            <img
              v-if="item.iconUrl"
              class="icon"
              :src="index === active ? item.activeIconUrl : item.iconUrl"
            />
            {{ item.name }}
          </div>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
import { mapGetters, mapState } from 'vuex'
import tool from '@/util/tool'
Vue.use(Tab).use(Tabs)

export default {
  name: 'AnchorPoint',
  props: {
    componentId: {
      type: String,
      default: undefined
    },
    activityCode: {
      type: String,
      default: undefined
    }
  },
  data () {
    return {
      modulesScrollTop: [],
      active: 0,
      watchScroll: true,
    }
  },
  computed: {
    ...mapState({
      isClient: 'isInMobile'
    }),
    ...mapGetters('main', ['pageContent']),
    pageData () {
      const temp = {
        ...this.pageContent.componentList.find(
          a => a._id === this.componentId
        )
      }
      const ruleVisibleTabs = temp.tabs.filter(item => {
        return this.pageContent.componentList.some(
          list => {
            return list.ruleVisible && list._id === item.labelComponentId
          }
        )
      })
      return this.isClient ? { ...temp, tabs: ruleVisibleTabs } : { ...temp }
    },
    bgColor () {
      return {
        background: this.pageData.backgroundColor
      }
    },
    tabStyle () {
      return {
        color: this.pageData.textColor
      }
    },
    activeTabStyle () {
      return {
        background: `linear-gradient(137deg, ${this.pageData.startColor}, ${this.pageData.endColor}`,
        color: this.pageData.activeTextColor
      }
    }
  },
  watch: {
    pageData () {
      this.$nextTick(() => {
        this.initSticky()
        this.initModulesScollTop()
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initSticky()
      this.initModulesScollTop()
    })
    if (this.isClient && tool.IS_NATIVE()){
      window.App.setPullAble({ able: 'N' })
    } 
    window.addEventListener('scroll', this.handleScroll)
    this.$sendQdas('8888111801', {
      item_name: '锚点组件-加载成功'
    })
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    change (index) {
      this.watchScroll = false
      this.active = index
      this.initModulesScollTop()
      window.scrollTo({ top: this.modulesScrollTop[index] })
      setTimeout(() => { this.watchScroll = true }, 500)
      this.$sendQdas('8888111802', {
        item_name: '锚点组件-点击',
        item_id: this.pageData.tabs[index]._id
      })
    },
    handleScroll () {
      if (!this.watchScroll) return
      const scrllTop = window.scrollTop || document.documentElement.scrollTop || document.body.scrollTop
      this.initModulesScollTop()
      const temp = [...this.modulesScrollTop]
      temp.push(scrllTop)
      this.active = Math.max(temp.sort((a, b) => a - b).indexOf(scrllTop) - 1, 0)
      this.$refs.tabs.setCurrentIndex(this.active)
    },
    initSticky () {
      const top = document.querySelector('.header-bar-module')?.offsetHeight || 0
      const dom = document.querySelector('.AnchorPoint')
      dom && (dom.style.top = (top - 1) + 'px')
    },
    initModulesScollTop () {
      this.modulesScrollTop = []
      // 管理端关闭滚动功能，只预览
      if (!this.isClient) return this.modulesScrollTop = [0, 0]

      const headerHeight = document.querySelector('.header-bar-module')?.offsetHeight || 0
      const anchorPointHeight = document.querySelector('.AnchorPoint')?.offsetHeight || 0
      this.pageData.tabs.forEach((item) => {
        let scrollTop = this.getElementTop(document.getElementById(item.labelComponentId))
        let scrollDistance = Math.max(0, scrollTop - headerHeight - anchorPointHeight)
        this.modulesScrollTop.push(scrollDistance)
      })
    },
    getElementTop (el) {
      let actualTop = el.offsetTop
      let current = el.offsetParent

      while (current !== null) {
        actualTop += current.offsetTop
        current = current.offsetParent
      }
      return actualTop
    }
  }
}
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
<style lang="less">
  .AnchorPoint {
    position: sticky;
    top: 0;
    z-index: 500;
  }
</style>
